<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>

    <br/>
    <router-link to="/users/5">/users/5</router-link>
    <router-link to="/users/8">/users/8</router-link>

    <br/>
    <router-link to="/users/6/profile">/users/6/profile</router-link>
    <router-link to="/users/6/posts">/users/6/posts</router-link>

    <button @click="goList">golist</button>
    <button @click="goUser(5)">goUser(5)</button>
    <button @click="goUser(8)">goUser(8)导航式编程</button>

    <button @click="go(-1)">goPrev</button>
    <button @click="go(1)">goNext</button>


    <router-link :to="{name:'users',params:{id:8}}">命名路由和视图</router-link>
  </nav>

  <!--动态--->
  <router-view/>
  <!--固定--->
  <router-view name="Footer"></router-view>
</template>

<script>
  export default {
     methods:{
       goList(){

         //this.$router.push("/list");
         this.$router.push({  //编程式导航  可以动态的切换路由
           //name:"List"
           path:"/list"
         })
       },
       goUser(id){

         this.$router.push({
           name:'users',
           params:{id}
         });
       },
       go(step){
         this.$router.go(step);//步长
       }
     }
  }
</script>


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
